Xceed DataGrid for WPF v7.2 Documentation
Customizing Card Views
Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.2 > Xceed DataGrid for WPF > Code Snippets > Customizing Card Views

The following page provides a list of examples that demonstrate how to customize the appearance of card views. For more card view-related information, refer to the Card Views topic.

All examples in this topic assume that the grid is bound to the Orders table of the Northwind database, unless stated otherwise.

Adding an InsertionRow to the fixed headers

The following example demonstrates how to add an InsertionRow to the fixed header section of a grid. 

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">

  <Grid.Resources>

    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"

                                     Source="{Binding Source={x:Static Application.Current},

                                                       Path=Orders}"/>

   </Grid.Resources>

   <xcdg:DataGridControl x:Name="OrdersGrid"

                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">

      <xcdg:DataGridControl.View>

         <xcdg:TableView>



           <xcdg:TableView.FixedHeaders>

              <DataTemplate>

                 <xcdg:InsertionRow/>

              </DataTemplate>

           </xcdg:TableView.FixedHeaders>

         </xcdg:TableView>

      </xcdg:DataGridControl.View>

   </xcdg:DataGridControl>

</Grid>

Clearing a fixed header section

The following example demonstrates how to clear the content of all header and footer sections of a grid using its view's UseDefaultHeadersFooters property.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">

  <Grid.Resources>

    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"

                                    Source="{Binding Source={x:Static Application.Current},

                                                      Path=Orders}"/>

   </Grid.Resources>

   <xcdg:DataGridControl x:Name="OrdersGrid"

                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">

      <xcdg:DataGridControl.View>

         <xcdg:CardView UseDefaultHeadersFooters="False"/>

       </xcdg:DataGridControl.View>

   </xcdg:DataGridControl>

</Grid>
VB.NET
Copy Code 
Dim view As New CardView()

view.UseDefaultHeadersFooters = False

dataGridControl.View = view
C#
Copy Code 
CardView view = new CardView();

view.UseDefaultHeadersFooters = false;

dataGridControl.View = view;

Changing the main (primary) column

The following example demonstrates how to set the ShipName column as a grid's main column. 

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">

  <Grid.Resources>

    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"

                                    Source="{Binding Source={x:Static Application.Current},

                                                      Path=Orders}"/>

   </Grid.Resources>

   <xcdg:DataGridControl x:Name="OrdersGrid"

                         ItemsSource="{Binding Source={StaticResource cvs_orders}}"

                         View="CardView">

      <xcdg:DataGridControl.Columns>

        <xcdg:Column FieldName="ShipName" IsMainColumn="True"/>

      </xcdg:DataGridControl.Columns>

   </xcdg:DataGridControl>

</Grid>
VB.NET
Copy Code 
dataGridControl.Columns( "ShipName" ).IsMainColumn = True
C#
Copy Code 
dataGridControl.Columns[ "ShipName" ].IsMainColumn = true;

Adding separator lines

The following examples demonstrates how to add separator lines between card "columns".

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">

  <Grid.Resources>

    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"

                                    Source="{Binding Source={x:Static Application.Current},

                                                      Path=Orders}"/>

   </Grid.Resources>

   <xcdg:DataGridControl x:Name="OrdersGrid"

                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">

      <xcdg:DataGridControl.View>

         <xcdg:CardView>



           <xcdg:CardView.SeparatorLinePen>

             <Pen Thickness="1.5" Brush="Orange"

                  DashStyle="{x:Static DashStyles.DashDotDot}"/>

           </xcdg:CardView.SeparatorLinePen>

         </xcdg:CardView>

      </xcdg:DataGridControl.View>

   </xcdg:DataGridControl>

</Grid>
VB.NET
Copy Code 
Dim pen As New Pen()

pen.Thickness = 1.5

pen.Brush = Brushes.Orange

pen.DashStyle = DashStyles.DashDotDot



Dim view As New CardView()

view.SeparatorLinePen = pen



dataGridControl.View = view
C#
Copy Code 
Pen pen = new Pen();

pen.Thickness = 1.5;

pen.Brush = Brushes.Orange;

pen.DashStyle = DashStyles.DashDotDot;



CardView view = new CardView();

view.SeparatorLinePen = pen;



dataGridControl.View = view;

 

Recreating the default card-view header

The following example demonstrates how to recreate the default card-view header, which contains a ColumnManagerRow to the right of a GroupByControl.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">

  <Grid.Resources>

    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"

                                       Source="{Binding Source={x:Static Application.Current},

                                                        Path=Orders}"/>

  </Grid.Resources>

  <xcdg:DataGridControl x:Name="OrdersGrid"

                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">

    <xcdg:DataGridControl.View>

      <xcdg:CardView UseDefaultHeadersFooters="False">

        <xcdg:CardView.FixedHeaders>

         <DataTemplate>

           <DockPanel>

             <!-- OneWay binding is used because we want the ColumnManagerRow's height to

                  follow what is defined by the GroupByControl. A FallbackValue

                  is specified so the initial measure pass has an acceptable minimal

                  value.-->

             <xcdg:ColumnManagerRow DockPanel.Dock="Right"

                                    Height="{Binding ElementName=groupByControl,

                                                     Path=ActualHeight,

                                                     Mode=OneWay,

                                                     FallbackValue=60}"/>

             <xcdg:GroupByControl x:Name="groupByControl"/>

           </DockPanel>

         </DataTemplate>

        </xcdg:CardView.FixedHeaders>

      </xcdg:CardView>

    </xcdg:DataGridControl.View>

  </xcdg:DataGridControl>

</Grid>

Applying a grid background brush

The following example demonstrates how to apply a one of the custom background brushes (provided by Xceed) to a grid's background.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">

    <Grid.Resources>

       <xcdg:DataGridCollectionViewSource x:Key="cvs_products"

                                       Source="{Binding Source={x:Static Application.Current}, Path=ProductsTable}"/>

      

    </Grid.Resources>

   <xcdg:DataGridControl x:Name="ProductsGrid"

                         ItemsSource="{Binding Source={StaticResource cvs_products}}"

                         Background="{x:Static xcdg:DataGridControlBackgroundBrushes.AuroraRed}">     

       <xcdg:DataGridControl.Columns>

          <xcdg:Column FieldName="ProductName"

                       IsMainColumn="True"/>

       </xcdg:DataGridControl.Columns>

       <xcdg:DataGridControl.View>

          <!-- In Cardflow 3D view, if a theme is not explicitly specified,

               the Elemental Black theme will be used. -->

          <xcdg:CardflowView3D CardHeightToViewportRatio="0.5"/>

       </xcdg:DataGridControl.View>

    </xcdg:DataGridControl>

 </Grid>
VB.NET
Copy Code 
dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed
C#
Copy Code 
dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed;

Applying a card background brush

The following example demonstrates how to apply one of the custom background brushes (provided by Xceed) cards (i.e., data rows) by creating an implicit style that targets DataRow and that sets the background property.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">

    <Grid.Resources>

       <xcdg:DataGridCollectionViewSource x:Key="cvs_products"

                                    Source="{Binding Source={x:Static Application.Current}, Path=ProductsTable}"/>

      <Style TargetType="{x:Type xcdg:DataRow}">

         <Setter Property="Background"

                 Value="{x:Static xcdg:CardBackgroundBrushes.Retro}"/>

      </Style>  

    </Grid.Resources>

    <xcdg:DataGridControl x:Name="ProductsGrid"

                          ItemsSource="{Binding Source={StaticResource cvs_products}}">

       <xcdg:DataGridControl.Columns>

          <xcdg:Column FieldName="ProductName"

                       IsMainColumn="True"/>

       </xcdg:DataGridControl.Columns>

       <xcdg:DataGridControl.View>

          <xcdg:CardflowView3D CardHeightToViewportRatio="0.5">

             <xcdg:CardflowView3D.Theme>

                <xcdg:ChameleonTheme/>

             </xcdg:CardflowView3D.Theme>

          </xcdg:CardflowView3D>           

       </xcdg:DataGridControl.View>

    </xcdg:DataGridControl>

 </Grid>
Show AllShow All
Hide AllHide All
 

 

 

Copyright Xceed Software Inc

Send Feedback